<!DOCTYPE HTML>
<html lang="cn-zh">
<head>
<meta charset="UTF-8"/>
<title>{{ test }}</title>
<!--[if IE 6]>
<script type="text/javascript" src="firebug-lite/build/firebug-lite.js"></script>
<![endif]-->
<script src="../dist/vmodel.js"></script>
<script>
var model = xbind({
    $id: 'test',
    url: 'http://www.baidu.com',
    my_tpl: 'full',
    user: {
        name: 'jcode',
        sex: '女士',
        ah: ['体育', '游戏']
    },
    test: 'Hello Word!'
});
var model2 = xbind({
    $id: 'testa',
    test: '表1'
});
setTimeout(function() {
    model.$set('user.name', 'sprufu');
	model.$set("user.bgColor", 'red');
	model.$set("my_tpl", "inc-tpl.html");
}, 2000);


</script>

</head>
<body x-controller="test" class="x-controller">
    <div x-template="full"><b>Hello</b> {{ user.name }}!</div>
    <div x-template="simple">Hi {{ user.name }}!</div>
	
	<form x-form-fuser="">
		<div>
			<input type="TEXT" id="in" name="name" x-bind="user.name" minlength="4" maxlength="14" />
			<span x-show="fuser.name.$error.minlength">长度要大于4位</span>
			<span x-show="fuser.name.$error.maxlength">长度要小于14位</span>
		</div>
		<div>
			<label><input type="radio" name="sex" x-bind="user.sex" value="先生" /> 男</label>
			<label><input type="radio" name="sex" x-bind="user.sex" value="女士" /> 女</label>
		</div>
		
		<div>
			<label><input type="checkbox" name="ah" x-bind="user.ah" value="体育" /> 体育</label>
			<label><input type="checkbox" name="ah" x-bind="user.ah" value="音乐" /> 音乐</label>
			<label><input type="checkbox" name="ah" x-bind="user.ah" value="游戏" /> 游戏</label>
		</div>
		
		<div>
			<select x-bind="user.job" id="select">
				<option>--请选择--</option>
				<option value="被踢">IT</option>
				<option value="国家养的猪">公务员</option>
			</select>
		</div>
	</form>
    
    <div>
        <textarea x-bind="user.info"></textarea>
    </div>
    
    <table x-ajax-users="data.json">
        <caption> 总共: {{ users.total }} <a x-href="{{ url }}"> {{ test }} </a></caption>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>email</th>
            <th>操作</th>
        </tr>
        <tr x-repeat-user="users.rows">
            <td></td>
            <td>{{ user.title }}</td>
            <td></td>
            <td> {{ user.publishDate }} </td>
            <td> <button x-click="users.$read()"> read() </button> </td>
        </tr>

    </table>
    
    <table x-grid-users="data.json" page="3">
        <caption> 总共: {{ users.total }} <a x-href="{{ url }}"> {{ test }} <button x-click="users.$page(2)">page 2</button></a></caption>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>email</th>
            <th>操作</th>
        </tr>
        <tr x-repeat-user="users.rows">
            <td></td>
            <td>{{ user.title }}</td>
            <td></td>
            <td> {{ user.publishDate }} </td>
            <td> <button x-click="users.$read()"> read() </button> </td>
        </tr>

    </table>
    
    <div id="test" class="man woman" x-class-woman="user.sex == '女士'">hello {{ user.name }}{{ user.sex }}!</div>
    <div x-click="user.sex = '先生'"> visible </div>
    <div x-style-background-color="user.bgColor">爱好: {{ user.ah }} </div>
    <div>职位: {{ user.job }} </div>
    <div>自我介绍: {{ user.info }}</div>
    <a x-href="{{ url }}">主页: {{ user.name }} </a>
    <div id="test2" x-if="user.sex == '先生'">TMD, 这家伙是男的, 喜欢{{ user.ah }}!!!</div>
    <div id="dd" x-show="user.sex == '女士'"> 这个MM很漂亮嘛, 很喜欢{{ user.ah }}. </div>
    <div x-include="my_tpl"></div>
    <div x-include="my_tpl"></div>
    <ul x-skip>
        <li x-repeat-item="user.ah"> {{ $index }} - {{ item }} <button x-click="$remove()">remove</button> </li>
    </ul>
</body>
</html>
<!-- vim:et:sw=4:ft=javascript:ff=dos:fenc=utf-8:ts=4:noswapfile -->
